<template>
	<div class="content">
		<image v-show="!loaded" :src="load_img" class="load"></image>
		<image v-show="loaded" @load="imgLoad" :src="img" class="real"></image>
		<div class="bg" v-if="!load_img && !loaded"></div>
	</div>
</template>

<script>
	export default {
		props: {
			img: {
				type: String
			},
			/**
			 * loading图,不传默认显示黑色div占位
			 * */
			load_img: {
				type: String
			}
		},
		data() {
			return {
				loaded: false
			}
		},
		methods: {
			imgLoad(e) {
				this.loaded = true
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100%;
	}

	.content image {
		width: 100%;
		height: 100%;
		/* position: absolute; */
	}

	.bg {
		width: 100%;
		height: 100%;
		background-color: #000;
		position: absolute;
		z-index: 100;
	}

</style>
